<template>
  <div class="w-full h-full flex">
    <svg class="flex-1" ref="svgRef" />
  </div>
</template>

<script lang="ts" setup>
import { Markmap } from 'markmap-view';
import { transformer } from './markmap';

const props = defineProps<{
  value?: string;
}>();


const svgRef = ref();
const mindmapData = ref(props?.value || '');
let mm;

const update = async () => {
  const { root } = transformer.transform(mindmapData.value);
  await mm.setData(root);
  mm.fit();
};

onMounted(() => {
  mm = Markmap.create(svgRef.value);
  update();
});

onUpdated(update);

watch(
  () => props.value,
  (val) => {
    if (val !== undefined) {
      mindmapData.value = val;
      update();
    }
  }
);
</script>

<style scoped lang="scss"></style>